import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hotfil_pub_web/widgets/my_theme.dart';
import 'package:velocity_x/velocity_x.dart';

import 'core_data_clipper.dart';

class HomeCoreDataItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 3,
      child: InkWell(
        radius: 0,
        child: Column(
          children: [
            Text(
              '待审订单数',
              style: TextStyle(color: MyTheme.secondaryTextColor, fontSize: 12),
            ),
            const SizedBox(
              height: 4,
            ),
            Container(
              padding:
                  const EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
              child: Text(
                Random().nextInt(4).toString(),
                style: TextStyle(color: MyTheme.mainTextColor, fontSize: 16),
              ),
              decoration: BoxDecoration(
                  color: Colors.blue, borderRadius: BorderRadius.circular(4)),
            ),
            const SizedBox(
              height: 26,
            ),
          ],
        ),
        onTap: () {
          print('点击;了一个项目');
        },
      ),
    );
  }
}

class AddCoreData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 3,
      child: CupertinoButton(
        child: const Icon(
          Icons.add_circle_outline,
          size: 24,
        ),
        onPressed: () {
          print('点击了添加项目');
        },
      ),
    );
  }
}

class HomeCoreData extends StatefulWidget {
  @override
  State<HomeCoreData> createState() => _HomeCoreDataState();
}

class _HomeCoreDataState extends State<HomeCoreData> {
  bool isOpend = false;
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        children: [
          AnimatedContainer(
            color: Colors.white,
            duration: Duration(milliseconds: 300),
            padding: const EdgeInsets.only(top: 22, bottom: 30),
            height: isOpend ? 330 : 166,
            child: Wrap(
              children: [
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                HomeCoreDataItem(),
                AddCoreData()
              ],
            ),
          ),
          InkWell(
            child: Transform.translate(
              offset: const Offset(0, 15),
              child: Stack(
                children: [
                  VxEllipse(
                    width: 80,
                    height: 30,
                    backgroundColor: MyTheme.dividerColor,
                  ),
                  Positioned(
                    left: 32,
                    top: 2,
                    child: Icon(
                      isOpend ? Icons.expand_less : Icons.expand_more,
                      size: 16,
                      color: MyTheme.secondaryTextColor,
                    ),
                  )
                ],
              ),
            ),
            onTap: () {
              setState(() {
                isOpend = !isOpend;
              });
            },
          )
        ],
      ),
    );
  }
}
